<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/1.9.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/1.9.0/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/1.9.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/1.9.0/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        var url;

        <!-- 添加/修改用户 start -->

        <!-- 打开添加用户信息窗口 -->
        function openAddUserDialog(){
            //1.打开添加窗口
            $("#dlg").dialog("open").dialog("setTitle","添加用户信息");
            //2.清空表单信息（表单添加内容后，无论是否保存成功，都会保留上次填写的值）
            $("#fm").form("clear");
            //设置url
            url = "${pageContext.request.contextPath}/user/saveUser";
        }

        <!-- 打开修改用户信息窗口 -->
        function openUpdateUserDialog(){
            //1.获取行信息
            var rows = $("#tt").datagrid("getSelections");
            //2.判断行信息是否为一条或多条
            if(rows.length != 1){
                $.messager.alert("系统提示","请选择一条数据");
                return;
            }
            //3.填充表单
            var row = rows[0];
            $("#fm").form("load",row);
            //4.打开编辑窗口
            $("#dlg").dialog("open").dialog("setTitle","编辑用户信息");
            //4.设置url
            url = "${pageContext.request.contextPath}/user/updateUser?id=" + row.id;
        }

        <!-- 保存/修改用户数据 -->
        function saveUser(){
            // alert(url);
            $("#fm").form("submit",{
                url:url,
                success:function(data){
                    var data = eval('(' + data + ')');
                    if(data.status){
                        //提示保存成功
                        $.messager.alert("系统提示","保存成功");
                        //关闭文本框
                        $("#dlg").dialog("close");
                        //重新加载数据
                        $("#tt").datagrid("reload");
                    }else{
                        //提示保存失败
                        $.messager.alert("系统提示","保存失败");
                    }
                }
            })
        }
        <!-- 关闭添加用户对话框 -->
        function closeSaveUserDlg(){
            $("#dlg").dialog("close");
        }
        <!-- 添加/修改用户 end -->

        <!-- 删除用户 start -->

        function deleteUser(){

            //1.获取选中数据
            var rows = $("#tt").datagrid("getSelections");
            //2.判断选中个数是否大于1
            if(rows.length == 0){
                $.messager.alert("系统提示","请至少选择一条数据");
                return;
            }
            //3.获取id集合
            var ids = "";
            for(var i = 0; i < rows.length; i++){
                ids += rows[i].id + ",";
            }
            //4.提示是否删除
            //5.提交数据，发送请求
            //6.删除成功提示并重新加载datagrid
            $.messager.confirm("系统提示","您确定要删除" + rows.length + "条数据吗?",function (r){
                if(r){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/user/deleteUser",
                        type:"post",
                        dataType:"json",
                        data:{ids:ids},
                        success:function(data){
                            if(data.status == "success"){
                                $.messager.alert("系统提示","删除成功");
                                $("#tt").datagrid("reload");
                            }
                            else{
                                $.messager.alert("系统提示","删除失败");
                                return;
                            }
                        }
                    });
                }
            });
        }

        <!-- 删除用户 end -->

        <!-- 条件查询用户 start -->

            function searchUser(){
                $("#tt").datagrid("load",{
                    username:$("#searchUsername").val()
                });
            }

        <!-- 条件查询用户 end -->

    </script>
</head>
<body>

    <!-- 数据显示 -->
    <table id="tt" class="easyui-datagrid"
           title="用户管理"
           fitColumns="true"
           fit="true"
           rownumbers="true"
           pagination="true"
           url="${pageContext.request.contextPath}/user/selectUserByPage"
           pageSize="10"
           pageList="[10,20,30,40,50]"
           toolbar="#tb"
           striped="true">
        <thead>
        <tr>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="50" align="center" sortable="true">编号</th>
            <th field="username" width="50" align="center" sortable="true">用户名</th>
<%--            <th field="password" width="50" align="center" sortable="true">密码</th>--%>
        </tr>
        </thead>
    </table>
    <div id="tb">
        <a href="javascript:openAddUserDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:openUpdateUserDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <div>
            用户名：<input type="text" id="searchUsername" name="searchUsername" size="20">
            <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">查询</a>
        </div>
    </div>


    <!-- 添加对话框 -->
    <div id="dlg" class="easyui-dialog"
         style="padding:10px 10px;width:500px;height:200px;"
         closed="true"
         buttons="#dlg-buttons">
        <form id="fm" method="post">
            <table>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" id="username" name="username" class="easyui-validatebox textbox" required="true"></td>
                    <td>&nbsp;</td>
                    <td>密码:</td>
                    <td><input type="password" id="password" name="password" class="easyui-validatebox textbox" required="true"></td>
                </tr>
            </table>
        </form>
    </div>

    <div id="dlg-buttons">
        <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeSaveUserDlg()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
    </div>

</body>
</html>
